<template>
<div>
  case 1 <input type="text" v-model="msg">
  <br>
  case 2 <input type="text" v-model="msg1">
</div>
  <hr>
  <div>
  case 3 <input type="text" v-model="msg2.foo.bar.age">
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,watch} from "vue";
let msg = ref<string>('小满')
let msg1 = ref<string>('大满')

let msg2 = reactive({
  foo:{
    bar:{
      name:'zs',
      age:22
    }
  }
})
//v3的watch默认会开启deep
watch([msg,msg1],(newValue,oldValue) => {
  // console.log(newValue)
  // console.log(oldValue)
})
//第一个参数默认是对象类型,如果需要监听字符串,需要使用函数返回
watch(() => msg2.foo.bar.age,(newValue,oldValue) => {
  console.log(newValue)
  console.log(oldValue)
},{
  // deep:true  //v3会默认开启deep
  immediate:true,//立即执行一次
  flush:'pre'  //pre -> 组件更新之前  sync -> 同步执行  post -> 组件更新之后执行
})
</script>

<style scoped>

</style>